@import "_global";

.ifr {

@font-family: "Lucida Grande", 'Asap', Arial, Helvetica, sans-serif;
@appBgColor: black;
@appTextColor: #dddddd;

	min-width:960px;
	min-height:600px;
	// overflow:hidden;
	background:@appBgColor;
	color:@appTextColor;
	height:100%;
	position:relative;
	font-family: @font-family;
	font-size:13px;
	line-height:1.2;
    
    >  .trailers,  > .config {
        #fn > .transition(top);
    }
    
     >  .config {
        @height: 35px;
         
        position:absolute;
        width: 100%;
        top:-@height;
    	height:@height;
    	background-color:#666;
    	background-image: url("@{imageURL}bg_linen_med.jpg");
        -moz-box-shadow: 0 -1px #606060 inset, 0 -2px 0 #9D9D9D inset, 0 -3px 6px #333333 inset;
        -webkit-box-shadow: 0 -1px #606060 inset, 0 -2px 0 #9D9D9D inset, 0 -3px 6px #333333 inset;
        box-shadow: 0 -1px #606060 inset, 0 -2px 0 #9D9D9D inset, 0 -3px 6px #333333 inset;
    	background-repeat:repeat-x;
    	background-position:bottom;
    	moz-transform: translate(0pt, -20px);
    	perspective:1px;
        
        &.visible {
            top:0px;
            
            + .trailers {
                top: @height
            }
        }
        
        .share{
            position: absolute;
            right: 5px;
            top: 5px;
        }
    }
    
    #ifr-toggleConfig {
        background: #dedede url("@{imageURL}/hgrabber.gif") repeat-x 50% 1px;
    	display: block;
    	height: 8px;
    	margin: 0 auto;
    	text-indent: -9999px;
    	width: 30px;
    	cursor:pointer;
    	position:relative;
        z-index: 3;
    	#fn > .transition();
        #fn > .border-radius(0,0,50px, 50px);

        &:hover{
            height: 12px;
            background:#666;
        }
    }
    
    .auxBtn{
        position: absolute;
        left: 5px;
        top: 5px;
        
        #ifr_updateDbBtn, & #ifr_aboutBtn{
           font-size: larger;
        }
    }
    
    
    
    > .trailers {
        top:0px;
    	bottom:0;
    	width:100%;
    	position:absolute;
    	z-index:1;
        
        .ifr-overlay{
            position: absolute;
            top: 0px;
            z-index: 2;
            height: 100%;
            width: 100%;
            background-color: rgba(0,0,0,0.1);
            visibility: hidden;
            #fn > .transition(background-color);
        }
        
        &.disabled .ifr-overlay{
            visibility: visible;
            background-color: rgba(0,0,0,0.8);
        }
        
        
        > .movieInfo, > nav {
            position:absolute;
            width:50%;
        	top:0;
        	bottom:0;
        	left:0;
        	right:auto;
        	text-align:center;
        }
        
        > .movieInfo {
            padding-top:50px
            
            > img {
                height:50%;
            	-moz-transition: opacity 0.2s linear 0s;
            	opacity:1;
            }
            
            > img.change {
        	    opacity:0;
            }
            
            > .poster{
                background: url('@{imageURL}loader.gif') no-repeat 50% 50%;
                margin-top: 30px;
                #fn > .transition();
            }
            
            > .details {
            	text-align:left;
            	margin:20px 50px 0;
            	position:absolute;
            	bottom:60px;
                
                > * {
                	padding:10px 0;
                	border-top:1px solid #666;
                	display:block;
                }
                
                 & > .summary, & > h3 {
                    margin:0;
                }
                
                > .summary {
                    height:4em;
                    overflow:auto;
                }
                
                > h3 {
                    border:none;
                	padding-right:65px
                }
                
                > cite {
                    font-size: 85%;
                	font-style: normal;
                	color:#666;
                }
                
                table {
                    border:0;
                	border-collapse:collapse;
                	border-spacing:0;
                	max-width:100%;
                	width:100%;
                	table-layout:fixed;
                    
                    th {
                        text-align:right;
                    	color:#666;
                    	font-weight:normal;
                    	padding-right:4px;
                    	width:75px;
                    }
                    
                    & th, & td {
                        white-space:nowrap;
                    	text-overflow:ellipsis;
                    	overflow:hidden;
                    }
                }
            }
        }
        
        > nav {
            right: 0;
        	left:auto;
            
            h2 {
                height: 30px;
                line-height: 30px;
            	margin: 0;
            	padding: 20px;
            }
            
            > .movieList {
                bottom: 0;
            	left: 0;
            	position: absolute;
            	right: 0;
            	top: 70px;
            	overflow:auto;
            	margin-bottom:60px;
            }
            
            ul {
            	position:relative;
            	list-style:none;
            	padding:0;
            	margin:20px 50px;
            
                li {
                	font-size:140%;
                	text-align:left;
                    a{
                        color: @appTextColor;
                    }
                }
                
                .selector {
                    background: #4c4c4c;
                    background: -moz-linear-gradient(top, #4c4c4c 0%, #666666 2%, #606060 18%, #474747 41%, #2c2c2c 44%, #000000 51%, #111111 60%, #2b2b2b 95%, #1c1c1c 98%, #131313 100%);
                    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #4c4c4c), color-stop(2%, #666666), color-stop(18%, #606060), color-stop(41%, #474747), color-stop(44%, #2c2c2c), color-stop(51%, #000000), color-stop(60%, #111111), color-stop(95%, #2b2b2b), color-stop(98%, #1c1c1c), color-stop(100%, #131313));
                    background: -webkit-linear-gradient(top, #4c4c4c 0%, #666666 2%, #606060 18%, #474747 41%, #2c2c2c 44%, #000000 51%, #111111 60%, #2b2b2b 95%, #1c1c1c 98%, #131313 100%);
                    background: -o-linear-gradient(top, #4c4c4c 0%, #666666 2%, #606060 18%, #474747 41%, #2c2c2c 44%, #000000 51%, #111111 60%, #2b2b2b 95%, #1c1c1c 98%, #131313 100%);
                    background: -ms-linear-gradient(top, #4c4c4c 0%, #666666 2%, #606060 18%, #474747 41%, #2c2c2c 44%, #000000 51%, #111111 60%, #2b2b2b 95%, #1c1c1c 98%, #131313 100%);
                    background: linear-gradient(top, #4c4c4c 0%, #666666 2%, #606060 18%, #474747 41%, #2c2c2c 44%, #000000 51%, #111111 60%, #2b2b2b 95%, #1c1c1c 98%, #131313 100%);
                    box-shadow:0 0 10px 5px #06F;
                }
            }
        }
    }
    
    #rating {
        background-image: url("@{iconURL}rating_black_bg.png");
    	background-repeat:no-repeat;
    	background-color:transparent;
    	background-position:-50px 50px;
    	border: medium none navy;
    	display: inline;
    	height: 21px;
    	margin: 0;
    	padding: 0;
    	position: absolute;
    	right: 0;
    	top: 9px;
    	width: 56px;
        
        &.g {background-position:33px 0 !important}
        &.pg {background-position:26px -80px!important }
        &.pg-13 {background-position:4px -120px !important}
        &.nc-17 {background-position:0px -160px !important}
        &.r {background-position:33px -40px !important}
    }
    
    .about {
        position: absolute;
        z-index: 9999;
        width: 512px;
        margin-left: -291px;
        padding: 30px;
        top: -1000px;
        left: 50%;
        background: #efefef;
        color: #333;
        border: 5px solid rgba(0,0,0,0.5);
        #fn > .rounded(10px);
        #fn > .transition(top,0.7s);
         
        &.show{
            top: 65px;
        }
        
        .close{
            position: absolute;
            right: 10px;
            top: 10px;
            height: 20px;
            width: 20px;
        }
    }
}